<template>
  <!-- 骨架区域 -->
  <view class="waterfall-skeleton-wrap">
    <view class="u-column">
      <view v-for="item in skeletons" :key="item" class="column-item-view">
        <view class="cover-view skeleton animate-skeleton" :class="{'l-cover-view':item%2==0}"></view>
        <view class="content-view">
          <view class="title-view skeleton animate-skeleton"></view>
          <view class="u-flex">
            <view class="avatar-view skeleton animate-skeleton"></view>
            <view class="name-view skeleton animate-skeleton"></view>
          </view>
        </view>
      </view>
    </view>
    <view class="u-column">
      <view v-for="item in skeletons" :key="item" class="column-item-view">
        <view class="cover-view skeleton animate-skeleton" :class="{'r-cover-view':item%2>0}"></view>
        <view class="content-view">
          <view class="title-view skeleton animate-skeleton"></view>
          <view class="u-flex">
            <view class="avatar-view skeleton animate-skeleton"></view>
            <view class="name-view skeleton animate-skeleton"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'waterfallSkeleton',
  props: {
    // 加载骨架图数量
    skeletons: {
      type: Number,
      default: 4
    },
  }
}
</script>

<style lang="scss" scoped>
.waterfall-skeleton-wrap {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  background-color: #F7F8FA;
  width: 100%;
  height: 100%;
  padding: 8rpx 4rpx 0;
  overflow: hidden;
  .u-column {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0 4rpx;
  }
  .column-item-view {
    margin-bottom: 16rpx;
    border-radius: 8rpx;
    background-color: #FFFFFF;
    overflow: hidden;
  }
  .cover-view {
    width: 100%;
    height: 360rpx;
    border-radius: 16rpx;
  }
  .l-cover-view,
  .r-cover-view {
    height: 480rpx;
  }
  .content-view {
    padding: 16rpx;
  }
  .title-view {
    height: 72rpx;
    margin-bottom: 16rpx;
    border-radius: 8rpx;
  }
  .avatar-view {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    margin-right: 16rpx;
  }
  .name-view {
    flex: 1;
    height: 32rpx;
    border-radius: 8rpx;
  }
  .skeleton {
    background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
    background-size: 400% 100%;
  }
  .animate-skeleton {
    animation: animate-skeleton 1.8s ease infinite
  }
}
@keyframes animate-skeleton {
  0% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0 50%
  }
}
</style>